<template>
    <div class="bodyBox">
        <div class="image">
            <swiper :slidesPerView="1" :spaceBetween="30" :loop="true" :centeredSlides="true" :pagination="{
                clickable: true
            }" :autoplay="{
            delay: 1000,
            disableOnInteraction: false
        }" :navigation="true" :modules="modules" class="mySwiper">
                <swiper-slide v-for="item in imagesList">
                    <img :src="item.imageUrl" alt="">
                </swiper-slide>

            </swiper>
        </div>

        <div class="allPicture">
            <div class="pirctureBox" v-for="(item, index) in list" @click="toProfile(1)">
                <img class="firstImage" :src="item.url" alt="">
                <div class="name">Anna</div>
                <img class="secondImage"
                    src="https://innocencemodels.com/wp-content/themes/yootheme/cache/d6/3-bart-main-book-d6693d47.webp"
                    alt="">
            </div>
        </div>

        <div class="allInstagram">

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const list = ref([
    {
        url: '	https://innocencemodels.com/wp-content/themes/yootheme/cache/fd/Anna-2-2-scaled-fde8089f.webp'
    },
    {
        url: '	https://innocencemodels.com/wp-content/themes/yootheme/cache/fd/Anna-2-2-scaled-fde8089f.webp'
    },
    {
        url: '	https://innocencemodels.com/wp-content/themes/yootheme/cache/fd/Anna-2-2-scaled-fde8089f.webp'
    },
    {
        url: '	https://innocencemodels.com/wp-content/themes/yootheme/cache/fd/Anna-2-2-scaled-fde8089f.webp'
    },
    {
        url: '	https://innocencemodels.com/wp-content/themes/yootheme/cache/fd/Anna-2-2-scaled-fde8089f.webp'
    },
    {
        url: '	https://innocencemodels.com/wp-content/themes/yootheme/cache/fd/Anna-2-2-scaled-fde8089f.webp'
    },
    {
        url: '	https://innocencemodels.com/wp-content/themes/yootheme/cache/fd/Anna-2-2-scaled-fde8089f.webp'
    },
    {
        url: '	https://innocencemodels.com/wp-content/themes/yootheme/cache/fd/Anna-2-2-scaled-fde8089f.webp'
    },
    {
        url: '	https://innocencemodels.com/wp-content/themes/yootheme/cache/fd/Anna-2-2-scaled-fde8089f.webp'
    },
    {
        url: '	https://innocencemodels.com/wp-content/themes/yootheme/cache/fd/Anna-2-2-scaled-fde8089f.webp'
    },
])

const router = useRouter()

const toProfile = (id: number) => {
    router.push('/profile/' + id)
}

import { onMounted } from 'vue';

// import Swiper core and required modules
import { Navigation, Autoplay, Pagination, Scrollbar, A11y } from 'swiper/modules';

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import { getHomeAPI } from '@/apis/user';
import { ElMessage } from 'element-plus';

const modules = [Autoplay, Pagination, Navigation, A11y];

const imagesList = ref([])

const getHome = async () => {
    const res = await getHomeAPI();

    if (res.data.code === 200) {
        imagesList.value = res.data.data
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

onMounted(() => {
    getHome()
}) 

</script>

<style lang="scss" scoped>
.bodyBox {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;

    .image {
        img {
            width: 100%;
        }
    }

    .allPicture {
        width: 100%;
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;

        .pirctureBox {
            width: 100%;
            position: relative;

            img {
                width: 100%;
                height: 100%;
                transform: scale(1.1);
                transform: scale(1);
                transition: all .4s;
            }

            .firstImage,
            .secondImage {
                width: 100%;
                height: 100%;
                transition: opacity .5s ease-in-out;
                /* 添加过渡效果 */
            }

            .secondImage {
                // display: none;
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0;
                /* 初始时不显示第二张图片 */
            }

            .name {
                position: absolute;
                height: 10%;
                width: 100%;
                background-color: black;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
                bottom: 0;
                left: 0;
                font-size: 20px;
                opacity: 0;
                z-index: 1001;
            }

            &:hover {
                .name {
                    opacity: 1 !important;
                }

                .firstImage {
                    opacity: 0;
                    /* 鼠标悬停时第一张图片透明度变为0 */
                }

                .secondImage {
                    opacity: 1;
                    /* 鼠标悬停时第二张图片透明度变为1 */
                }
            }
        }
    }
}
</style>